import React from 'react';

const Settings = () => {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">设置</h1>
      <div className="space-y-4">
        <div>
          <h2 className="text-lg font-medium mb-2">API 设置</h2>
          <div className="space-y-2">
            <div>
              <label className="block text-sm font-medium text-gray-700">API 密钥</label>
              <input
                type="password"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                placeholder="输入阿里云百炼 API 密钥"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700">API 端点</label>
              <input
                type="text"
                className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                defaultValue="baile.cn-hangzhou.aliyuncs.com"
              />
            </div>
          </div>
        </div>
        
        <div>
          <h2 className="text-lg font-medium mb-2">模型设置</h2>
          <div className="space-y-2">
            <div>
              <label className="block text-sm font-medium text-gray-700">默认模型</label>
              <select className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
                <option>Qwen2.5-Omni-7B</option>
                <option>Qwen1.5-7B</option>
                <option>Qwen1.5-14B</option>
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-medium text-gray-700">温度</label>
              <input
                type="range"
                min="0"
                max="1"
                step="0.1"
                defaultValue="0.7"
                className="mt-1 block w-full"
              />
              <div className="flex justify-between text-xs text-gray-500">
                <span>精确</span>
                <span>平衡</span>
                <span>创造性</span>
              </div>
            </div>
          </div>
        </div>
        
        <div>
          <h2 className="text-lg font-medium mb-2">界面设置</h2>
          <div className="space-y-2">
            <div className="flex items-center">
              <input
                id="dark-mode"
                type="checkbox"
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
              />
              <label htmlFor="dark-mode" className="ml-2 block text-sm text-gray-700">
                深色模式
              </label>
            </div>
            
            <div className="flex items-center">
              <input
                id="auto-scroll"
                type="checkbox"
                className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                defaultChecked
              />
              <label htmlFor="auto-scroll" className="ml-2 block text-sm text-gray-700">
                自动滚动到最新消息
              </label>
            </div>
          </div>
        </div>
        
        <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
          保存设置
        </button>
      </div>
    </div>
  );
};

export default Settings;